<template>
  <div class="app-container">
    <!-- 整体页面 -->
    <!-- <div style="width: 525px;height: 742.5px;border: 1px solid #eee;background: #eee;padding: 30px 25px;margin-left: 150px;float: left;">
      <div style="width: 100%;height: 100%;border: 1px solid #000;font-size: 12px;">
        <div style="width: 100%;">
          <div style="width: 100%;height: 40px;line-height: 40px;display: flex;justify-content: space-between;">
            <div style="width: 78%;text-align: center;font-size: 16px;">水泥混凝土抗压强度试验检测报告(立方体)</div>
            <div style="width: 22%;text-align: center;font-size: 12px;">BGLQ05002F</div>
          </div>
          <div style="width: 100%;height: 40px;padding: 4px 0;display: flex;justify-content: space-between;">
            <div style="width: 70%;">检测单位名称(专用章)：山东XX检查公司</div>
            <div style="width: 30%;">报告编号：JWSG1-BG-TKY-202323-026</div>
          </div>
        </div>
        <div style="width: 100%;height: calc(100% - 80px);">
          <div style="width: 100%;height: 265px;">
            <div style="width: 100%;height: 33px;border-top: 0.3px solid #000;">
              <div style="display: flex;">
                <div style="width: 20%;height: 33px;text-align: center;border-right: 0.3px solid #000;line-height: 33px;">施工/委托单位</div>
                <div style="width: 30%;height: 33px;border-right: 0.3px solid #000;">山东省公路桥梁建设集团有限公司</div>
                <div style="width: 20%;height: 33px;text-align: center;border-right: 0.3px solid #000;line-height: 33px;">工程名称</div>
                <div style="width: 30%;height: 33px;">山东省公路桥梁建设集团有限公司</div>
              </div>
            </div>
            <div style="width: 100%;height: 33px;border-top: 0.3px solid #000;">
              <div style="display: flex;justify-content: space-between;align-items: center;">
                <div style="width: 20%;height: 33px;text-align: center;border-right: 0.3px solid #000;line-height: 33px;">工程部位/用途</div>
                <div style="width: 80%;height: 33px;line-height: 33px;">exexexexrction1111</div>
              </div>
            </div>
            <div style="width: 100%;height: 33px;border-top: 0.3px solid #000;">
              <div style="display: flex;justify-content: space-between;align-items: center;">
                <div style="width: 20%;height: 33px;text-align: center;border-right: 0.3px solid #000;line-height: 33px;">样品信息</div>
                <div style="width: 80%;height: 33px;">样品名称，样品编号，样品名称，样品编号，样品名称，样品编号，样品名称，样品编号</div>
              </div>
            </div>
            <div style="width: 100%;height: 33px;border-top: 0.3px solid #000;">
              <div style="display: flex;">
                <div style="width: 20%;height: 33px;text-align: center;border-right: 0.3px solid #000;line-height: 33px;">检测依据</div>
                <div style="width: 30%;height: 33px;line-height: 33px;border-right: 0.3px solid #000;">JTG 3420-2020</div>
                <div style="width: 20%;height: 33px;text-align: center;border-right: 0.3px solid #000;line-height: 33px;">判断依据</div>
                <div style="width: 30%;height: 33px;line-height: 33px;">设计文件</div>
              </div>
            </div>
            <div style="width: 100%;height: 33px;border-top: 0.3px solid #000;">
              <div style="display: flex;justify-content: space-between;align-items: center;">
                <div style="width: 20%;height: 33px;text-align: center;border-right: 0.3px solid #000;line-height: 33px;">主要仪器</div>
                <div style="width: 80%;height: 33px;line-height: 33px;">主要仪器设备名称及编号</div>
              </div>
            </div>
            <div style="width: 100%;height: 33px;border-top: 0.3px solid #000;">
              <div style="display: flex;">
                <div style="width: 20%;height: 33px;text-align: center;border-right: 0.3px solid #000;line-height: 33px;">混凝土种类</div>
                <div style="width: 30%;height: 33px;text-align: center;border-right: 0.3px solid #000;line-height: 33px;">dcdscdscdccd 333</div>
                <div style="width: 20%;height: 33px;text-align: center;border-right: 0.3px solid #000;line-height: 33px;">设计强度等级</div>
                <div style="width: 30%;height: 33px;line-height: 33px;">C50</div>
              </div>
            </div>
            <div style="width: 100%;height: 33px;border-top: 0.3px solid #000;">
              <div style="display: flex;">
                <div style="width: 12%;height: 33px;text-align: center;border-right: 0.3px solid #000;line-height: 33px;">搅拌方式</div>
                <div style="width: 22%;height: 33px;line-height: 33px;border-right: 0.3px solid #000;">搅拌方式</div>
                <div style="width: 12%;height: 33px;text-align: center;border-right: 0.3px solid #000;line-height: 33px;">试件尺寸</div>
                <div style="width: 22%;height: 33px;line-height: 33px;border-right: 0.3px solid #000;">150*150*150</div>
                <div style="width: 12%;height: 33px;text-align: center;border-right: 0.3px solid #000;line-height: 33px;">养护条件</div>
                <div style="width: 20%;height: 33px;line-height: 33px;">T66</div>
              </div>
            </div>
            <div style="width: 100%;height: 33px;border-top: 0.3px solid #000;border-bottom: 0.3px solid #000;">
              <div style="display: flex;justify-content: space-between;align-items: center;">
                <div style="width: 20%;height: 32px;text-align: center;border-right: 0.3px solid #000;line-height: 33px;">水泥石外加剂</div>
                <div style="width: 30%;height: 32px;line-height: 32px;border-right: 0.3px solid #000;">水泥，石，外加剂</div>
                <div style="width: 20%;height: 32px;text-align: center;border-right: 0.3px solid #000;line-height: 33px;">设计坍塌度</div>
                <div style="width: 30%;height: 32px;line-height: 32px;">3088888</div>
              </div>
            </div>
          </div>
          <div style="width: 100%;height: calc(100% - 365px);">
            <el-table  border stripe :data="tableData" style="width: 100%">
              <el-table-column prop="date" label="日期"></el-table-column>
              <el-table-column prop="name" label="姓名"></el-table-column>
              <el-table-column prop="address" label="地址"></el-table-column>
            </el-table>
          </div>
          <div style="width: 100%;border-bottom: 0.3px solid #000;">
            <div style="width: 100%;border-top: 0.3px solid #000;border-bottom: 0.3px solid #000;height: 40px;line-height: 20px;">检测结论：经检测，该组混凝土试件28天抗压强度达到设计强度的128.2%，128.2%，128.2%，128.2%，符合设计要求。</div>
            <div style="width: 100%;height: 60px;line-height: 20px;">
              <p style="height: 20px;margin: 0;padding: 0;">附加声明：</p>
              <p style="height: 20px;margin: 0;padding: 0;">监理单位：</p>
              <p style="height: 20px;margin: 0;padding: 0;">监理人员：</p>
            </div>
          </div>
        </div>
        <div style="width: 100%;">
          <span style="display: inline-block;width: 25%;">检测：</span>
          <span style="display: inline-block;width: 25%;">审核：</span>
          <span style="display: inline-block;width: 25%;">批准：</span>
          <span style="display: inline-block;width: 25%;">日期：</span>
        </div>
      </div>
    </div> -->

    <!-- <div style="width: 525px;height: 742.5px;float: left;background: #eee;padding: 30px 25px;font-size: 12px;"> -->
    <div
      style="width: 525px;height: 742.5px;float: left;border: 1px solid #eee;;padding: 30px 25px;font-size: 12px;margin-left: 100px;">
      <el-row>
        <el-col :span="18">
          <div class="grid-content" style="font-size: 16px;text-align: center;">水泥混凝土抗压强度试验检测报告(立方体)
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">BGLQ05002F</div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <div class="grid-content">检测单位名称(专用章)：山东XX检查公司</div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">报告编号：JWSG1-BG-TKY-202323-026</div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="5">
          <div class="grid-content bg-purple-dark bg-purple-right">施工/委托单位</div>
        </el-col>
        <el-col :span="7">
          <div class="grid-content bg-purple-dark bg-purple-right">山东省公路桥梁建设集团有限公司</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple-dark bg-purple-right">工程名称</div>
        </el-col>
        <el-col :span="7">
          <div class="grid-content bg-purple-dark">山东省公路桥梁建设集团有限公司</div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="5">
          <div class="grid-content bg-purple-top bg-purple-right">工程部位/用途</div>
        </el-col>
        <!-- <el-col :span="18"><div class="grid-content bg-purple-top">exexexexrction1111</div></el-col> -->
        <el-col :span="19">
          <div class="grid-content bg-purple-top purpose_input">
            <el-input v-model="yongTu" style="width: 100%;"></el-input>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="5">
          <div class="grid-content bg-purple-top bg-purple-right">样品信息</div>
        </el-col>
        <el-col :span="19">
          <div class="grid-content bg-purple-top">样品名称，样品编号，样品名称，样品编号，样品名称，样品编号，样品名称，样品编号，样品名称，样品编号
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="5">
          <div class="grid-content bg-purple-top bg-purple-right">检测依据</div>
        </el-col>
        <el-col :span="7">
          <div class="grid-content bg-purple-top bg-purple-right">JTG 3420-2020</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple-top bg-purple-right">判断依据</div>
        </el-col>
        <el-col :span="7">
          <div class="grid-content bg-purple-top">设计文件</div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="5">
          <div class="grid-content bg-purple-top bg-purple-right">主要仪器设备名称</div>
        </el-col>
        <el-col :span="19">
          <div class="grid-content bg-purple-top">主要仪器设备名称及编号</div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="5">
          <div class="grid-content bg-purple-top bg-purple-right">混凝土种类</div>
        </el-col>
        <el-col :span="7">
          <div class="grid-content bg-purple-top bg-purple-right">
            <el-select v-model="value" placeholder="" style="width: 100%;">
              <el-option v-for="item in options" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple-top bg-purple-right">设计强度等级</div>
        </el-col>
        <el-col :span="7">
          <div class="grid-content bg-purple-top">C50</div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="4">
          <div class="grid-content bg-purple-top bg-purple-right">搅拌方式</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-top bg-purple-right">搅拌方式</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-top bg-purple-right">试件尺寸</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-top bg-purple-right">150*150*150</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-top bg-purple-right">养护条件</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-top">T66</div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="5">
          <div class="grid-content bg-purple-top bg-purple-right">水泥石外加剂</div>
        </el-col>
        <el-col :span="7">
          <div class="grid-content bg-purple-top bg-purple-right">水泥，石，外加剂</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple-top bg-purple-right">设计坍塌度</div>
        </el-col>
        <el-col :span="7">
          <div class="grid-content bg-purple-top">3088888</div>
        </el-col>
      </el-row>

      <div class="box_table"
        style="width: 100%;height: calc(100% - 489px);border: 1px solid #000;border-top: none !important;">
        <!-- <el-table  border stripe  show-summary :data="tableData" size="mini" style="width: 100%;"> -->
        <el-table border stripe show-summary :data="tableData" size="mini"
          style="width: 100%;" :header-cell-style="{background:'none'}">
          <el-table-column prop="date" label="序号" align="center" width="70"></el-table-column>
          <el-table-column prop="name" label="姓名" align="center" width="70"></el-table-column>
          <el-table-column label="地址" align="center">
            <el-table-column prop="province" label="省份" align="center" width="80">
              <el-input v-model="yongTu"></el-input>
            </el-table-column>
            <el-table-column prop="city" label="市区" align="center" width="80">
              <el-input v-model="yongTu"></el-input>
            </el-table-column>
            <el-table-column prop="address" label="地址" align="center"></el-table-column>
          </el-table-column>
          <el-table-column prop="address" label="数值" align="center" width="70"></el-table-column>
          <!-- <el-table-column sortable prop="address" label="数值" ></el-table-column> -->
        </el-table>
      </div>

      <div>
        <el-row>
          <el-col :span="24">
            <div class="grid-content-but">
              检测结论：经检测，该组混凝土试件28天抗压强度达到设计强度的128.2%，128.2%，128.2%，128.2%，符合设计要求。</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="grid-content-but">
            <div style="height: 20px;">附加声明：</div>
            <div style="height: 20px;">监理单位：</div>
            <div style="height: 16px;">监理人员：</div>
          </el-col>
        </el-row>
      </div>

      <div style="width: 100%;">
        <el-row>
          <el-col :span="6">
            <div>检测：</div>
          </el-col>
          <el-col :span="6">
            <div>审核：</div>
          </el-col>
          <el-col :span="6">
            <div>批准：</div>
          </el-col>
          <el-col :span="6">
            <div>日期：</div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data () {
    return {
      yongTu: "123",
      tableData: [
        { date: '1', name: '王小虎', address: '10' },
        { date: '2', name: '王小虎', address: '20' },
        // { date: '3', name: '王小虎', address: '30' },
      ],
      options: [
        { value: '选项1', label: '黄金糕' },
        { value: '选项2', label: '双皮奶' },
        { value: '选项3', label: '蚵仔煎' },
        { value: '选项4', label: '龙须面' },
        { value: '选项5', label: '北京烤鸭' }
      ],
      value: ''
    }
  },
  methods: {
    hntzhonglei () {

    }
  }
}
</script>


<style lang="scss" scoped>
  .el-row {
    color: #000;
  }

  .el-col {
  }

  .bg-purple-dark {
    border: 1px solid #000;
  }

  .bg-purple-right {
    border-right: none !important;
  }

  .bg-purple-top {
    border: 1px solid #000;
    border-top: none;
  }

  .bg-purple {
    border: 1px solid #000;
  }

  .bg-purple-light {
    border: 1px solid #ccc;
  }

  .grid-content {
    min-height: 37px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .grid-content-but {
    min-height: 36px;
    border: 1px solid #000;
    border-top: none !important;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .box_table .el-table {
    color: #000;
    margin-left: -1px;
  }

  .el-table--border {
    border-bottom: 1px solid #000;
  }

  .box_table ::v-deep .el-table th {
    color: #000;
    font-weight: 500;
    border: 1px solid #000;
    border-top: none !important;
    border-right: none !important;
    padding: 0;
    margin: 0;
  }

  .box_table ::v-deep .el-table td {
    color: #000;
    font-weight: 500;
    border: 1px solid #000;
    border-top: none !important;
    border-right: none !important;
  }

  .box_table ::v-deep .el-table .el-table__footer-wrapper {
    color: #000;
    font-weight: 500;
    border-top: 1px solid #000;
  }

  .box_table ::v-deep .el-input--medium .el-input__inner {
    height: 23px !important;
    line-height: 23px !important;
    /* border: none !important; */
    /* color: #000; */
  }
</style>
